<template>
  <div id="app">
    <imooc-header />
    <router-view></router-view>
    <imooc-footer />
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
export default {
  name: 'app',
  components: {
    'imooc-header': Header,
    'imooc-footer': Footer
  }
}
</script>
<style lang="scss">
@import "assets/css/global.css";
@import "assets/css/layer/default/layer.css";
@keyframes bounceIn {
  0%{
    opacity: 0;
    transform: scale(0);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceOut {
  0%{
    opacity: 1;
    transform: scale(1);
  }
  30%{
    opacity: 1;
    transform: scale(1.05);
  }
  100%{
    opacity: 0;
    transform: scale(0);
  }
}
.fade-leave-active{
  animation: bounceOut 0.3s;
}
.fade-enter-active,
.fade-enter-to{
  animation: bounceIn 0.3s;
}
.gray{
  color:#999
}
.orange{
  color: #ff5722;
}
.link{
  color: #01AAED;
}
.svg {
  position: relative;
  top: -10px;
}
.form-error {
  color: red;
}
.text-right{
  text-align: right !important;
}
.pull-right{
  float: right;
}
.text-right{
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-left{
  text-align: left;
}
.d-flex{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  &.just-center{
    justify-content: center;
  }
   &.just-left{
    justify-content: flex-start;
  }
  &.just-center{
    justify-content: flex-end;
  }
}
// through包括5 to没有5
@for $i from 0 to 5 {
 .pd#{$i}{
   padding: $i * 10 + px !important;
 }
 .pt#{$i} {
   padding-top: $i * 10 + px !important;
 }
 .mr#{$i}{
   margin-right: $i * 10 + px !important;
 }
 .ml#{$i} {
   margin-left: $i * 10 + px !important;
 }
 .mt#{$i} {
   margin-top: $i * 10 + px !important;
 }
}
</style>
